<template>
    <div class="item" @mouseenter="show = true" @mouseleave="show = false">
        <label :for="'todo' + todo.id">
            <input type="checkbox"
                   :id="'todo' + todo.id"
                   v-model="todo.completed">
            <span :class="['item-text',todo.completed ? 'line-through' : '']">
                    {{ todo.text }}
                </span>
        </label >
        <div class="del">
            <img src="../assets/images/del.jpg"
                 :class="[show ? 'show' : 'hide']"
                 @click="deleteTodo">
        </div>

    </div>
</template>

<script>
    export default {
        name: "todo-content-item",
        props: {
            todo: {
                type: Object,
                required: true
            }
        },
        data(){
            return{
                show: false
            }
        },
        methods: {
            deleteTodo(){
                this.$emit('deleteTodo', this.todo.id);
            }
        }
    }
</script>

<style scoped>
    .item {
        background: #fff;
        height: 50px;
        line-height: 50px;
        border-top: 1px solid #ccc;
        font-size: 25px;
    }

    .item:hover {
        background: aliceblue;
    }

    .item label{
        width: 560px;
        display: block;
        float: left;
    }

    .line-through {
        text-decoration: line-through;
        color: #999;
    }
    .item-text{
        margin-left: 10px;
    }

    input[type="checkbox"]{
        -webkit-appearance: none;
        vertical-align:middle;
        margin-top:0;
        background:#fff;
        border:#ddd solid 1px;
        border-radius: 50%;
        min-height: 30px;
        min-width: 30px;
    }

    input[type="checkbox"]:checked {
        background: url("../assets/images/ok.png") no-repeat center;
        background-size: 30px 30px;
        border: none;
    }

    .del{
        width: 20px;
        display: block;
        float: left;
    }
    .del img {
        width: 16px;
        height: 16px;
        cursor: pointer;
    }
    .show {
        display: inline;
    }
    .hide {
        display: none;
    }

</style>
